<template>
	<view>
		<u-navbar title="热门项目" :autoBack="true" :placeholder="true" />
		<view class="ulist">
			<u-list :height="scrollHeight">
				<u-list-item v-if="projectList.length > 0" v-for="(item, index) in projectList" :key="index">
					<view class="c-p-l-10 c-p-r-10" @click="$u.route('/pages/project/reservationDetails',{id: item.id})" >
						<view class="u-border coreshop-flex coreshop-align-center coreshop-padding-10 c-m-b-10 radius">
							<view class="flex-shink">
								<u-avatar :src="item.image || '/static/images/logo/logo.png'" shape="square" size="50" />
							</view>
							<view class="c-m-l-10 coreshop-percent-100">
								<view>{{item.name}}</view>
								<view class="">
									<text class="line-red coreshop-font-12">￥</text>
									<text class="line-red">{{item.price}}</text>
									<text class="line-gray coreshop-font-12 c-m-l-10">已预约{{item.subscribeCount}}</text>
								</view>
							</view>
							<view class="flex-shink" @click.stop="$u.route('/pages/reservation/seReservation', {projectId: item.id, type:'purchase'})">
								<u-button 
									color="#e54d42" 
									text="立即预约" 
									shape="circle" 
								></u-button>
							</view>
						</view>
					</view>
				</u-list-item>
				<u-empty v-else mode="list" />
			</u-list>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data(){
			return {
				scrollHeight:0, //元素的所需高度
				projectList:[],
				condition:{
					page: 1,
					limit: 100,
				}
			}
		},
		onLoad() {
			this.getProjects()
		},
		onReady() {
			let _this = this;
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					let wHeight=res.windowHeight //windoHeight为窗口高度，主要使用的是这个
					let titleH=uni.createSelectorQuery().select(".ulist"); //想要获取高度的元素名（class/id）
					titleH.boundingClientRect(data=>{
							_this.scrollHeight=wHeight-data.top  //计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）
					}).exec()
				}
			}) 
		},
		computed:{
			...mapState(['userStore']),
		},
		methods: {
			// 获取项目列表
			getProjects(){
				this.$u.api.projectList({...this.condition, storeId:this.userStore.id}).then(res=>{
					this.projectList = res.data
				})
			},
			// 选择项目
			onClickitem(index){
				uni.$emit('project',{...this.projectList[index]})
				uni.navigateBack()
			}
		}
	}
</script>
<style>
	page{
		background-color:#fff;
	}
</style>
<style lang="scss" scoped>
	
</style>